<template>
  <div class="box">
    <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-popover
          v-model="showPopover"
          theme="dark"
          :actions="actions"
          @select="onSelect"
          placement="bottom-end"
        >
          <template #reference> 管理 </template>
        </van-popover>
      </template>
    </van-nav-bar>
    <div v-if="list.length === 0">
      <van-empty description="暂无购物车" />
      <p class="goushop">
        <van-button round type="success" @click="gohome">立即购物</van-button>
      </p>
    </div>
    <ul v-else>
      <li v-for="item in list" :key="item">
        <span
          ><van-checkbox
            v-model="item.flag"
            @change="changselectone(item.cartid, item.flag)"
        /></span>
        <van-swipe-cell>
          <div class="zhong">
            <img :src="item.img1" alt="" />
            <div class="smal">
              <p>
                {{ item.proname }}
              </p>
              <p class="p2">￥{{ item.originprice }}</p>
              <p class="p3">
                <van-stepper
                  v-model="item.num"
                  theme="round"
                  min="1"
                  @plus="changnum(item.cartid, item.num++)"
                  @minus="changnum(item.cartid, item.num--)"
                  button-size="22"
                  disable-input
                />
              </p>
            </div>
          </div>

          <template #right>
            <van-button
              @click="unaddcar(item.cartid)"
              square
              text="删除"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
      </li>
    </ul>
    <p style="width: 100%; text-align: center; font-size: 14px">你可能还想要</p>
    <div class="tuijian">
      <tuijian></tuijian>
    </div>
    <van-submit-bar
      :price="price"
      decimal-length="1"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checked" @change="allsel">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>
<script>
import { showToast } from "vant";
import tuijian from "../views/goods/tuijianlist.vue";
import {
  getgoodslist,
  updatenum,
  selectone,
  selectall,
  removecar,
  removecarall,
} from "../service/user";
export default {
  data() {
    return {
      showPopover: false,
      checked: false,
      list: [],
      actions: [{ text: "清空购物车", icon: "" }],
    };
  },
  components: {
    tuijian,
  },
  computed: {
    price() {
      let dollor = 0;
      this.list.forEach((item) => {
        if (item.flag) {
          dollor += item.originprice * item.num;
        }
      });
      return Number(dollor) * 100;
    },
    // checked:{
    //   get(){
    //     return this.list.every((item)=>item.checked);
    //   },
    //   set(v){
    //     this.list.forEach((item)=>{
    //       item.checked=v;
    //     });
    //     this.allsel();
    //   }
    // }
  },
  methods: {
    //获取购物车数据
    getlist() {
      getgoodslist({ userid: this.$store.state.userInfo.data.userid }).then(
        (res) => {
          if (res.data.code === "200") {
            this.list = res.data.data;
          }
          console.log(res);
        }
      );
    },
    onClickLeft() {
      history.back();
    },
    //增加或减少购物数量
    changnum(cartid, num) {
      updatenum({ cartid: cartid, num: num }).then((res) => {
        console.log(res);
      });
    },
    //更改单条购物车选中状态
    changselectone(cartid, flag) {
      selectone({ cartid: cartid, flag: flag }).then((res) => {
        console.log(res);
      });
    },
    //修改全部选中状态
    allsel() {
      selectall({
        userid: this.$store.state.userInfo.data.userid,
        type: this.checked,
      }).then((res) => {
        if (res.data.code === "200") {
          this.getlist();
        }
      });
    },
    
    onSubmit() {},
    //单条删除购物车
    unaddcar(carid) {
      removecar({ cartid: carid }).then((res) => {
        this.getlist();
      });
    },
    //如果购物车没有数据,可去选购,
    gohome() {
      this.$router.push("/home");
    },
    //清空购物车
    onSelect(action) {
      showToast(action.text);
      if (action.text === "清空购物车") {
        removecarall({ userid: this.$store.state.userInfo.data.userid }).then(
          (res) => { 
            if(res.data.code==="200"){
                this.getlist();

            }
           
            // console.log(res);
          
          }
        );
      }
    },
  },
  updated(){
    // this.getlist()
  },
  created() {
    this.getlist();
  },
};
</script>

<style lang="scss" scoped>
.box {
  background-color: #f5f5f5;
}

ul {
  font-size: 14px;
  margin: 10px 0px;
  background-color: #f5f5f5;
  li {
    padding: 10px 0px;
    background-color: #f5f5f5;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .zhong {
      display: flex;
      background-color: white;
      img {
        display: block;
        width: 100px;
        height: 100px;
      }
      .p2 {
        margin-top: 20px;
      }
      .p3 {
        text-align: right;
      }
      p {
        padding: 0px 20px 0px 0px;
        margin: 5px 0px;
      }
    }
  }
}
.tuijian {
  width: 100%;
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
.goushop {
  text-align: center;
  button {
    padding: 10px 50px;
  }
}
.delall {
  font-size: 14px;
  text-align: right;
  .span {
    background-color: white;
    border-radius: 10px;
    padding: 10px;
    margin-top: 10px;
  }
}
</style>
